<template>
  <div id="tpl">
    <van-card
      :price="goods.goodsPrice"
      :title="goods.goodsName"
      :thumb="goods.goodsThumb"
      :desc="goods.description"
    ></van-card>
    <div id="size">
      <div class="title">规格</div>
      <div style="padding-top: 10px;">
        <van-button
          class="item"
          v-for="sku in goodsSkus"
          @click="selectSkuGoods(sku)"
          style="margin-right: 10px;"
          :type="sku.buttonType"
          size="small"
          :key="sku.index"
        >{{sku.skuName}}
        </van-button>
      </div>
    </div>
    <div id="count">
      <div class="title">数量</div>
      <div style="padding-top: 10px;">
        <van-stepper v-model="count" integer :min="1" :max="40" change="changeCount"></van-stepper>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-mini-btn text="返回" @click="backToGoods"></van-goods-action-mini-btn>
      <van-goods-action-big-btn text="加入购物车" @click="addToCart"></van-goods-action-big-btn>
      <van-goods-action-big-btn text="立即购买" @click="pay" primary></van-goods-action-big-btn>
    </van-goods-action>
  </div>
</template>
<script>
  import axios from "axios"
  import url from "../assets/app/url"
  import {Card, Notify, Dialog, Toast} from "vant";

  import CartGoods from "../assets/app/module/CartGoods"

  import coreFunc from "../assets/core/func"
  import func from "../assets/app/func";

  const Goods = require("../assets/app/module/Goods");
  const SkuGoods = require("../assets/app/module/SkuGoods");

  export default {
    data() {
      return {
        goods: {},
        goodsInfo: {},
        goodsSkus: [],
        count: 0,
        selectSku: {}
      };
    },
    created: function () {
      // func.clearGoodsSizeCache();
      axios.get(url.GoodsDetial + "yanxuanId/" + this.$route.query.yanxuanId).then(req => {
        let reqInfo = req.data.info;
        let price = 0;
        if (coreFunc.emptyObj(func.getGoodsSizeCache())) {
          let prices = [];
          reqInfo.skuList.forEach(sku => {
            prices.push(sku.price);
          });
          price = coreFunc.min(prices);
        }
        this.goods.goodsPrice = price;

        this.goods = Goods(reqInfo.id, this.$route.query.yanxuanId, reqInfo.name, price, reqInfo.listPicUrl, reqInfo.simpleDesc);

        reqInfo.skuList.forEach(sku => {
          let skuGoods = SkuGoods(this.goods, sku.id, sku.displayString, sku.picUrl, sku.yanxuanPrice, sku.price);
          this.goodsSkus.push(skuGoods);
        });

        let cacheSku = func.getGoodsSizeCache();
        this.goodsSkus.forEach(sku => {
          if (sku.skuId === cacheSku.skuId) {
            sku.buttonType = "danger";
            this.goods.goodsPrice = sku.realPrice;
          } else {
            sku.buttonType = "default";
          }
        });
      });
    },
    methods: {
      selectSkuGoods: function (sku) {
        // func.clearCart()
        this.selectSku = sku;
        func.setGoodsSizeCache(sku);
        this.goods.goodsPrice = sku.realPrice;
        this.goods.goodsThumb = sku.skuThumb;
        this.goodsSkus.forEach(sku => {
          sku.buttonType = "default";
        });
        sku.buttonType = "danger";
      },
      backToGoods: function () {
        this.$router.history.go(-1);
      },
      addToCart() {
        if (coreFunc.emptyObj(func.getUserinfoCache())) {
          Toast("检测不到帐号");
          return false;
        }
        if (this.count <= 0) {
          Dialog.alert({title: '错误', message: '请选择购买数量'});
          return false;
        }
        if (JSON.stringify(this.selectSku) === "{}") {
          Dialog.alert({title: '错误', message: '请选择型号'});
          return false;
        }
        let cartGoods = CartGoods(this.selectSku, this.count);
        func.addCartGoods(cartGoods, true);
        Toast('商品添加成功');
      },
      pay() {
        if (coreFunc.emptyObj(func.getUserinfoCache())) {
          Toast("检测不到帐号");
          return false;
        }
        if (this.count <= 0) {
          Dialog.alert({title: '错误', message: '请选择购买数量'});
          return false;
        }
        if (JSON.stringify(this.selectSku) === "{}") {
          Dialog.alert({title: '错误', message: '请选择型号'});
          return false;
        }
        let cartGoods = CartGoods(this.selectSku, this.count);
        let address = func.getAddress();
        if (coreFunc.emptyObj(address)) {
          Notify("请先选择配送");
          return false;
        }
        let price = Number(this.selectSku.realPrice) * Number(this.count);
        func.createOrder([cartGoods], price.toFixed(2), this.count, address);
        this.$router.push({path: "Order"})
      }
    }
  };
</script>
<style>
  #size,
  #count {
    padding: 15px;
    line-height: 1;
    font-size: 1rem;
    background-color: #fafafa;
  }

  .item {
    margin-bottom: 5px;
  }
</style>
